<html>
<head>
<script language=javascript>
/*
*基础数据的构造
*
*P[parentIndex]      主动选择框中option的显示；
*PV[parentIndex]    主动选择框中option的value；
*
*C[parentIndex][index]  被动选择框中option的显示；
*CV[parentIndex][index] 被动选择框中option的value；
*
*P为parent的简写；
*C为child的简写；
*V为value的简写；
*/
 
P = new Array();
PV = new Array();
 
C = new Array();
CV = new Array();
 
P[0]      = "AAA";
PV[0]     = 1;
C[0]      = new Array();
CV[0]     = new Array();
C[0][0]   = "aaa1";
CV[0][0]  = 2;
C[0][1]   = "aaa2";
CV[0][1]  = 3;
C[0][2]   = "aaa3";
CV[0][2]  = 4;
 
P[1]      = "BBB";
PV[1]     = 2;
C[1]      = new Array();
CV[1]     = new Array();
C[1][0]   = "bbb1";
CV[1][0]  = 1;
C[1][1]   = "bbb2";
CV[1][1]  = 2;
C[1][2]   = "bbb3";
CV[1][2]  = 3;
 
P[2]      = "CCC";
PV[2]     = 3;
C[2]      = new Array();
CV[2]     = new Array();
C[2][0]   ="ccc1";
CV[2][0]  = 1;
C[2][1]   ="ccc2";
CV[2][1]  = 2;
C[2][2]   ="ccc3";
CV[2][2]  = 3;
</script>
 
<script language="javascript">
/**
   *功能说明：清空所有option
   *参数说明：
   *o              选择框对象
   */
function clear(o){
    l=o.length;
    for (i = 0; i < l; i ++){
        o.options[0]=null;
    }
}
 
/**
   *功能说明：初始化主动选择框
   *参数说明：
   *parent        主动选择框的ID，字符串类型
   */
function init(parent){
    var parentObj = document.getElementById(parent);
    for (i=0;i<P.length;i++){
        parentObj.add(new Option(P[i],PV[i]));
    }
}
 
/**
   *功能说明：处理联动
   *参数说明：
   *parent    主选择框当前选中option的value
   *child       被动选择框对象
   */
function changeGroup(parent , child){
    m=-1;
    for (i=0;i<P.length;i++){
            if (PV[i]==parent){
                m=i;
            }
    }
    clear(child);
    if (m!=-1){
        if(C[m]==null||C[m].length<=0){
            child.add(new Option("----" , -1));
        }else{
            for (i=0;i<C[m].length;i++){
                child.add(new Option(C[m][i],CV[m][i]));
            }           
        }
    }else{
        child.add(new Option("----" , -1));
    }
}
 
</script>
</head>
<body onload="javascript:init('parent')">
 
<form name="myForm" method="post" action="">
<select name="parent" id="parent" onchange="javascript:changeGroup(this.value , document.myForm.child)">
    <option value="-1">----</option>
</select>
<select name="child" id="child">
    <option value="-1">----</option>
</select>
</form>
</body>
</html>